<template>
  <div v-if="!item.hidden && !item.meta?.hideInMenu">
    <!-- 没有子菜单的情况 -->
    <template v-if="!hasChildren(item)">
      <el-menu-item :index="resolvePath(item.path)">
        <el-icon v-if="item.meta && item.meta.icon">
          <component :is="item.meta.icon"></component>
        </el-icon>
        <template #title>{{ item.meta?.title }}</template>
      </el-menu-item>
    </template>
    
    <!-- 有子菜单的情况 -->
    <el-sub-menu v-else :index="resolvePath(item.path)">
      <template #title>
        <el-icon v-if="item.meta && item.meta.icon">
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta?.title }}</span>
      </template>
      
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
        :base-path="resolvePath(item.path)"
      />
    </el-sub-menu>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  basePath: {
    type: String,
    default: ''
  }
})

// 判断是否有子菜单
const hasChildren = (item) => {
  if (item.children && item.children.length > 0) {
    const userRole = localStorage.getItem('userRole')
    // 过滤掉没有权限的子菜单
    const showingChildren = item.children.filter(child => {
      if (child.hidden || child.meta?.hideInMenu) return false
      if (child.meta?.roles && !child.meta.roles.includes(userRole)) return false
      return true
    })
    return showingChildren.length > 0
  }
  return false
}

// 解析路径 - 修复路由重复问题
const resolvePath = (path) => {
  if (!path) return ''
  
  // 处理外部链接
  if (/^(https?:|mailto:|tel:)/.test(path)) {
    return path
  }
  
  // 处理绝对路径 - 直接返回
  if (path.startsWith('/')) {
    return path
  }
  
  // 处理一级路由 - 直接加上斜杠返回
  if (!props.basePath || props.basePath === '/') {
    return `/${path}`
  }
  
  // 处理子路由 - 确保不重复添加路径
  // 如果basePath已经包含了path，则直接返回basePath
  if (props.basePath.endsWith(path) || props.basePath === `/${path}`) {
    return props.basePath
  }
  
  // 否则，正确拼接路径
  return `${props.basePath}/${path}`
}
</script>

<style scoped>
/* 确保菜单项选中状态正确显示 */
:deep(.el-menu-item.is-active) {
  background-color: #263445 !important;
  color: #409EFF !important;
  border-right: 3px solid #409EFF;
}

/* 确保子菜单标题在折叠时隐藏 */
:deep(.el-menu--collapse .el-sub-menu__title span) {
  display: none;
}

/* 确保子菜单箭头在折叠时隐藏 */
:deep(.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow) {
  display: none;
}
</style>